<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4286917" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">预点餐</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaaf;</span>
                <div class="name">餐桌椅</div>
                <div class="code-name">&amp;#xeaaf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe779;</span>
                <div class="name">炒锅</div>
                <div class="code-name">&amp;#xe779;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">口腔科</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69a;</span>
                <div class="name">养发</div>
                <div class="code-name">&amp;#xe69a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">营销</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">其它</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f1;</span>
                <div class="name">返回头部</div>
                <div class="code-name">&amp;#xe7f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe754;</span>
                <div class="name">减肥</div>
                <div class="code-name">&amp;#xe754;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ab;</span>
                <div class="name">产后减肥</div>
                <div class="code-name">&amp;#xe6ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">早晚安</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea16;</span>
                <div class="name">产后</div>
                <div class="code-name">&amp;#xea16;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">除皱</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">美容美发</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">祛疤祛痣</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">美睫mb</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe694;</span>
                <div class="name">皮肤科</div>
                <div class="code-name">&amp;#xe694;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">纹绣纹眉</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">水光针</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c3;</span>
                <div class="name">养生</div>
                <div class="code-name">&amp;#xe7c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">医美抗衰</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe760;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe760;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe758;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe758;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">手机</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">皇冠</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">金额</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f7;</span>
                <div class="name">等级</div>
                <div class="code-name">&amp;#xe6f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
                <div class="name">总金额</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">电话</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">向上箭头</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">向下箭头</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
                <div class="name">向右箭头</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">向左箭头</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe913;</span>
                <div class="name">确认 对勾 正确 提交 完成 线性</div>
                <div class="code-name">&amp;#xe913;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c1;</span>
                <div class="name">人</div>
                <div class="code-name">&amp;#xe7c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69d;</span>
                <div class="name">退出</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe692;</span>
                <div class="name">收 藏</div>
                <div class="code-name">&amp;#xe692;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe698;</span>
                <div class="name">修改</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe693;</span>
                <div class="name">收 藏</div>
                <div class="code-name">&amp;#xe693;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">主页</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b0;</span>
                <div class="name">人</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f5;</span>
                <div class="name">小喇叭</div>
                <div class="code-name">&amp;#xe6f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78a;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe78a;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot?t=1742747120521'); /* IE9 */
  src: url('iconfont.eot?t=1742747120521#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAACscAAsAAAAASTQAACrMAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACJZgr4eN47ATYCJAOBPAtgAAQgBYRnB4RhG9I6VSGwcQDDWIvHUUguRaHs/w8J3JAJr6G+FEhRXbMy5sqaVpTqeMy1KznoW9+aHLX77wvCo6sgkwiHuDzWHIfDII2LWaEaHZRIdBCwg4xw9hWa6zLb5qvEhNcMpYT/r73uvG0/rTShUBmPUEiLMO7uBA0YxGaFHUp7pq8mQgMEnNgcnp/b/9lYxV2xApZsI3KAo8eCURsxBi0w2KiSUQZYzMKnWFgNWIQJvscL6ylWfgv1gVnf9+Tnc2rpzfCXk5ndFRQp6RKAoAhLXPDl/+v/V7K5ILQCpaAzTokz3ZGly2HpcJw2Px/4X+bqk232D1e4QtL6zi54xemKeEK+iZRre0WemiCLTs0mtPv4fCddTr6+85+/MLIRQyLGyoKH/lTNp/CnAMVeskET5Fws6dxUWtp9XuAIF2Rat5cKVuCSYv9vakmVUipy2C5LAWhD0f8jb+yRto1cnkbeNvYmkbTNsveK5JTSHj8ceDBII1+RUjVXamNLU3gICAoOIOBgzohr8UXaAe7cLAhcBsdXC//zN1I01Fwhg+mfRSHRepc+esi2ONJ+MB6xqA0YY4RU6ec7GFDh5YsrWrxsVYLbNurantgCatbgOm9tW7VohE+pEVzmjRJGwr1qx+wXIrhR5inwq//e3pA5DDiiUF/5bl6sKQef83rDsIvh73LKYMB5B0TAAzfG6m69+9BW4o3kpucqdt8ZrL7Am4J4CM8NR6gI0RJJJp1M8imhvIaam2qm2eZZY6Nv+pGrVrOG9Wp0h14cefHpEzH6hr+PICCDhasJRHFRL5TJ21VHxpuSmixLebWyqCpqB63/BzwYq1Gla6mlSU9B28SKsdBg4GoqMbe2sbUTOLnoOIscVbi5mykzMuR5OOgrsVfHgTnAbA3A5RSmD4gDGEMWqIEMqIIc0IWCwRIK0WlBKeZ8OIAeFAEKUDRoQwnABEqYoucTATBQMrCA0oEGKBMYQPnAFSoOplAJkEDlwRyql0IjXx/ABmoAtlBDsIOagwCaDE7QFHCBpqYkOT8TwBmaDSJoHjhCa0AFtBHcoG8pycz/ADBDrgrKkGuCEXJDMETuBTzk0eCBfAgckI+APvInUIJPBNjjL7pCXc9vgA0cAM/ThR/gn94wOrVuLYUKSZMlYuIh59q8TqCAVyJGW40miYGAxxkRuVJ7nXOaFrCBY2yKsRT/ieUJCAQiDsMgSOkyOtGRzSQRCBwikW3MYwnpBIW3mECAeDtEIXDDfTlc2X4ngjMPhiEzSDC2Kz6eYcECY3waCjhc7vqUmMmSEXyIZsPhcVgCAUP1Y7gyiOAIwbAFtL5znSDFC0bkH0GRAMPgIHdveTJTwcdiWTgcC4Eloq1UiDAsQgWLsykMHC43MBzG4DoTSaJQKRRaAJEGo1NFmwAjDdwTQ799Nh4nhtA0sbt/05POckKPbW1LUK2zoofgVXJYN9UKfXCCsvHJR+wIe3yafhntqVAbi9WGHpGefBQO99q7TiStFx39dGadAODtHrG/9ovTzi991UnxGXKNYOYV/I6uv4QdpuBlnV3/Ng0io5tacgRRF14m1+iSZvDR7Q53TB2F+7pLPE5XnuXFx4Fcc7jp0EOHWeoc1HVv5t/wuY3Q+h34W8TNgMHSvYkyEbUpnR0OIKsdIyXx33ZD9RkeYnZNVpulRG9Tm9dNN7U5W6bHnHotiKwPUFc2bcfOGWo+XuqBKmT6e6TEYn+zYRUoR/MK3xjGf3yZHKKJFkeU6sq/mz/IMh/km3HcHJGIFOaiNI5cEYrJslFHv3OmgPox/cZ15B6D68G2JRX3BTWzLqad3XFSbdrP1DTdRjgVYanO9ttdmnRf6rMGcT2ytaAJD7dxhkpSsxalWYZy6G6+qUUNjIuDcWY1aBJdN2wmhqq5sNpYJsfL/cnYvXT2/kJp3ZVYKzbBcRBVGhXogAboSZFwI1fLrZrYYAAT3YlGYapSmKycpSEelod1wbIiNItru7Apg2IFL8oX45NqWtfZ8DTpko0lUZvOJLkrvr+5fVMMEdpgnGxmCmWaBSrJHSPmgfHCMfLnodQuX03VlEBAN6TZwlT3pQgTz3r7oBa/mBY2l1anu5F0paeEad6zw3Jhm4+CEBpGeQajCNAijhD0R95mufHQR2gYD6OKmV2O0qZJOEJVDd9gRumtQpFxm32LXVwtHFMctjrPLIJPbmgv4eCpkvo8AiCbaHJEOKGyfbdc21eeDMENx0svPGr7ON9Qt1PaM8IOkwhV6B6cnmYUmEHUp8X6hdSgGjB2/f67Xjtq/9lP+RG8K1qURNvyZBRChCpO0hpzC4TUz6xxr/f3KD2AU4a34zDpHZFAcpw7wVsps/1XihN/1RXWw5mVAUJcyN/quoAmEFyJZYtJUormxXP/LqBWDNtSAnR7ymoz2SxCubGMPtrri8CfMALAhXllIqeOA4bJeD1+FV9MA7a5hE53UWmYUHy06L40Pt0fwxO4209pnVEDqWkbuREkJAAJyea/UfO+FA3HnKlXhMacDIiekX9CwfNjpCw5KvZ0shtq0lLMnAxSPLUqT+Uvx0OMtHWOqQtAhgZzUcMiIh18QWnC9imwJHzSmJRQx7SmQCcqOkoEl/hpkTeH6cTOoxxx5F0MT8/3I0rETr7tRnNeWfLPPURDDes6czA/RQFS6aGl8TWPmp4b2h9QopZEWJ9yvgII0YEM0jDHP0DNn0ck/x0rolgSsehhweRP1il1mu90EUQtNq3iz5y1Nmf53GdjjaM/3W0+bS+FE1nofGllWr/3kwg2rEXTUiy2P88dVtgrncWFQEEUPQrExX2P7A9Nsm0q4Yj0FDN/ITYE1p9+/tBN7F+pvfU99QdZEdT3nQuXUKr7Ohy61WuVa4kpLWKQBB7l5pt5LtmxWvAPB5ZKaW/dWuwE9jI5XSzNS5UyCYpuZjpv4FQtV4utqlgSRImedhYamU62m72+3J+PZc7QZ4nG7eF+/5c+U4txKqqNr+IcRYyxg+Zq8XqvGbLMyC8+SZJUybEtYCiwIiA369ttxps/Kr3AMipz8VDGbqKFFZ5MucyfA4UrxhL6+VIzkCItbV8kc8vZcNmfyfH5Rq47HR2bVE2hZZq6gPHl3V+7079ixGIomoPxOp/GU9FLm1H0RVrD7YQE4fYakRDgK/Mru5ImWLPlWqMw/i9NAnkO0Tcejzl3YyBZMJ4qS81YVnp/2F7WV4wH9ZnBdHAs5VNRnLdjXd2Gy0Y/GAwHTYnPzN8NQSq129pgKrojzA/woEEsOCd44wPt+RTdfFJCBv+bcg63zbEETaS2b5xOeseY8Gxf9VRvsf0oSBq5bUTUcq2Uj492gf6u+f0RbHKuFksUgzumEFODx1bhpBPDl2PZVuKPHjUn0+1UrTEbDslEhyZP0riVhzJ9uucyTbLQ1DNEhZhXnt6PJoe95jN8sQurYSsgrVNXfS/kJppJM6ilnC+gLNnUPLqbaGj9SFDacV+LEo1HYU9nGulIYcl+poUkmoBOoiP1QiWVj8Q9hnJJrObHOMeZSOplOj2Xi8oTwpjoaqXrvOCbL6qzIJmcqWdBb1huxz/2os4r2Mx2w6GpvkiKGsXE3QXuNuwVMofCQj6xfUJ1Qb0VbGqlas3L9t2uTGUatPSU0AbG2/mrgy9wScLQWwW+ybYDCySbCQl2E47s2MU5xFnKLi74dnssJX9i62rB66LF0XF6ac0n+6S+H6mf7XfXSNfynLGqZX1U5lmPY7qprwRvNTZIjYGDF8CTrsKyKC0lgjfXKs/8jHDyB/1QSbfd+jDfZ20IWOGKDcilgZD25WVuUvcOxbfb/shbeK+tPCk5d7AjjDlp8FFpzpJ7/IaoQfmRR3TaEFHbvWqfMpSucoba2qwT27htClafizLEdU184I3aUYc76Clqm1Kc/K4khZmjIeIEmW1n/SXRWlhANV4iCj9HaLVG6CYHjbKmMhl3wtBnUeTD9V8KJDzGAlyYqHAkZ+SojPYmfjg+CIslnvQRDUOvJBPBYPqQZcvLUWWIc38fdv0kiqnzN3xgGDjNUve8BQ/bVBLFhMMZx4/kZtzh18Z7YxIF/sdH9hMYxi/Bm7+L99CIxCy0HjuGaO2h5T1lm62yzeR9KQI9XcGSRTSBKgnTsAgrw4SCIcrx5WyhyQZfqscvlnLEeSHOYNNMG9R0Q5zVdVNwXADOhXXBOxM7xmn7w/k6nxolsUt8bzEVPy+lXqNA+fuY4/VZcvxzcwabHM5asjKE7puF6Xz6Rq3Fmf0xTirlZPiBIOAcWZLOsk0INYULnDnKBMCFXI2DwdxiY5bZlqOnI0kMQhGa1DnTvV6aPugsvUzPaNYKSHY+lCRwOBcIZPnU/bkqbkVCiS7rov3QEx5M3pv9zII4I5M2NCAkynzNG1/9KL75lD2/TW49c3zqEvt09vrGCc78qUaQzt5w69TH/buP/x1rKBie/S2+5gx1h8LHHfiEM37MSv9ujbDVHlV1yHQNZR/oALGsIZI89FJF02vxyssj2kMtEODs5Wy3WpByfZn0SWmU/bnvLKF5dEMwUuqTFL0tbz4dyRE63Y5Iu8XrxTvDd5ZXSImfXVxr57oLpXzhXZSbP2Xj5fh780agJANLuCEGY5aJM3Wto3dBnUwbTSkOiLehMdu3qA0Kn2P1e/WZuE1cma+oZM9+Nh+vq4KHhcHJwTSfMmXG5aCdnzyeOrao9bo0rcEa+zJfbONAagOspiQZyGxCxXCGArje3Sk0ACAxqKBZpeDUFM/kKd4ve9x5qJ4ULb4HNV9k2oZrinp0J4SXC/tuaQbfZHUgp/s79fDiVQ2d3bZt85+cYWIRJhrw9FJ49BZ2/O0z0w+nQ5NRGpnY+XSR9J0juWn9hYzdRnZ8HMyVeuXYcL2V8TsfzeiI67huZFfxkfl5VKGXFqfgVXK8339+0YsLk1rVyisjzpiYyPOHiYvQBFbT3eroPtdXzzGEN4Ysbk7UqkfRFO41RErK+VnkpQ9N9r6ljZ6mttbqVTTutwJwJMG9xSB9cw3RATryr9qmi/xYaO/sb42feZo/DGTAQBMW42uxmC4c6aWVhGV4iH/swnGaXWQeQ4aNFEvsEK2JLG8Nvs7LsENWxkvLvL1U/LH/O47vet/be+yw6zqu5/ief2a6OE0TrTcVMYgKN5Sk9Y3J3nlrdBBaEJQRs4WrkzcFNdAfaOF9/tHis3IISE+Dletqcy8y8nzKfoRnOp8r58vxO3TpFaGjMoTMfNZoJ9h0tews6U28kTXTBhtOfVMU5o7SvsV2zlteXpHt0CbEwYxCpffJ18picxhQvoQSACDkelVBxbJAXUgPfefn6fPt1u9Gyi3v6czDObVVWBZGxylI4dKVEbeaUhJEpxzelhJgS2lJz0LA8v/4XuL72TIZ6Odm9ZRsz5k0YZ0+2XMY1Xu0eJpj8+SUsv62GcYQyvrDqWPRy4i5sJUnQnDj77z+SOSmZmyePEdpK4cbKxEw3clQn8LB4pD7pdk+yXNOQjlyI7qpap3KBdqJT6/v/4m60va98UVxEtjJgEaB3GRBNw/yh6H3VWpz03W4M1QkRfBrsLdB+xpodx859j6nG1VOUBder6ymg/T2W/46tXVMGJqR3D3nRm9962ug3Zp/XN/y1tdHq0jvUWTH/Zqd6Xue47gnjx3Z7x333aMOhcVr8Cq5zuhChR7Q7PltqVWZvXLeFfDdyopnctvYxVvOL04EtW7ydF50dm3ijv69B08InSTfUuA5/Fyvsza9tnlbN9vp+83DLDVdNzzYbhmOW9+S/OF1UwOQ9uaIPTt18eilqbXNd1wJl9nC2Mk0Xj8yP6frOfHU1NlxgHdLC1ABCQqNyY2VouygBj6q6zC0IzNBhB5BcZpFERnyBHAQHCRsfSoYD/SsJ/Ha2GBo0Ig4z0G8nRfK0sDNWVbSRTWdnMEz7BkHvZa7GaG74eXsYJfcNzASbIr41dbHaxxvwJLtLFtaZodc0+Se2gg5mKrDFkoUdsjbia6sWlp/0xckm6BwgAVy/Hvs6xDTemHyO39Br5Fl9g5e0s+yT76r2v+H/4bvw58c0tBn0YZ1tzI/2XArteHf6Q9v6RXjlXYYdYQp2yXo8CeGm/1xiwXE3pesi10XFdEdK4/t/uRYFzezDYBhUaNo2NrHYX3/2pvwOMpNQnCSwzFxAFcbqOHWL0PZcDbUsnpO6g8AWfkWCEAmflrOHCuqGAm4qc57qGf+kcrchShWwhENSOaeTaw9SAsSrixGMHdrtzlaO9syCFkg/WR8k8eDskBWKI1vChvgpHIBshFp5Wq4jtu0zN2I9CTPkAYCMtORzF2pfzD1XA1uKWSCBjlqFYrUMZgz4qrJ0jNLBPHxjfbRuXbyHx0qVragwLl6JEarbVqUxq+exI5in1cLLPPsgs/HtOx80cuj59rC/VDXYv2to5jJan50o50ya9b57HT+P6kDr+WP8gH1+xW103RZFvIQj/m+vxhV6hnP0wTpdXYmr6bvJZ4AWICAx1Tcgs7MvIUeJnx7pZ+edQn/lkBhwQj7BFhQ78P0+EZ+Bqu0ukwYz4ySOnjvDZ3XMfXnwsjlMGfrmcWChPjGDjFYUESkEHmTcQR8TTBxo8MNgOCluxeUilOPc/amissW5GaUbfP8JfSXsG1lMV0+Tqv9+8aAUiQlfBx1IPDwIZLYG//FBzvlcEFeyQswvWcQT806PaCObXERorc6WHSq45vLWGiCYAWcgHIshAwdwseOrehnKqZsihdd/GObhXnfsaFoYDr3kvMvmKVTb2U/1yl9lb1Y2M48+yaPm4dbyebrnj3sbyoA49c/+WIUcKcMYqKnYf5TJ5LRJYcZNyFWukyQJX1ga8SJJ52TMuCHaMto9f7azQ1aSkVLcdvZ6kl2ehtNSVBxbwCft+mVfyuO07e1Vk87pt0B+neFzNgw6aj8mx6LVJM3GmIlMz01gIdeARwEKYZA/XLoAEpJiz5eFfdl5B2GBhMfW7Kw0Lqc0eOvx/Q8Wo8CDjhkK2rm46PoTgyexrgcFH76iSuN27NrgbcjzfrKa+Y4kyHMzK8JS+Pr+fEzZsTxDPx9CQ3nCPHj+fq0cEF9ZGFmYqn5eo7ezEyOCcl2KVUYXHRO2rIyjZPOebODg8Ot6qIzTHO2TssyxICg/vMfkozyInmjot/0K1dHl81wPF7zXpF37ZVEJz4cKflNIlIOiSPFfwmVkg/4d0zw8lfWXdi3aUW343Kb2+yr12giIrqfPNHOmZNSvOFJZdoJrjXi3PHFDTbHxwWNJeniE/MJEJNMrDfymBBoRyORk/vARPQk7zz/oPG04W7+cE80EvHcuvIcsZwc5j1fEf2bJtv8PXCBtwXeiNwbDpYsAYgjEwrPPwAWzTMtWWKKgD4g8AliBDIJTJCkkDzHZH72zKwNCuzjmwS9Hz+S2wbbCpHHqhvmp/H7wMrPhYbKp2YwETFzPh3P5sYRZCngrX1RfCdhK/F4eO1NQ2XtqHIvqYu4LO4UyhhKwJx4tx4DMEqsGV04VjsNSBK/c3SwohMGDP7UWaH5aaWhEJzCYwwnYEUc3XdJIphWO1aIxpqVHlbJ+ncnMDAVJg+xVBQHZCkEbhwbT58/M2JisuSOjmczNBvBkdeSJhesalRsUfY40b7Ro4Tq7etGB1YLpSo1uDKUf1dVWqPWtaJP9yHT5JKyzJ3Zb5tn8SykJiyOkU6NwxrRak78j2e82qvTTxES59DwDXj5EDH7lef7Yb7u/5xYtBKbSNHRU0JihHg51ItBdqA2eb3gb5jSJytj3OYrAc5H5bJgbvAmRNMrFNwPspcGx9BTKDpsIlrJif3Bi842RL4gZf9F2ya3ly7HJ56KjI/nR//LTUCrcanUBEZGWIJ5AIVqJLiHsn7nwP5/25Xz2Yq2V3Nod/fTJZsYjYheNXIh0YaqdBvR2jqEAGasVwzShitGpZoKSvB7XIA/J3qbICNCRVbpQ7cD+pmG0CgoKiPSb2sMLiouoJ9P+IwaUTY0nhTthUyjZjQSkFaclXDkCDg5ppkREVdFWChvtpjms2e7Ts+VtrHnphTfcc3NSvCK8/CI9dQPJrQb55HgOcQ7mOK9GEYOYd3GjYswFLbdz5rFv+YFDswKgcZSmlJSvWeOF42YL6j64W1yo/fSceNGr9XQBWOT8X7xa+P40ghj/az6kQIwpjrkyDfm7DcfCW+jfIZo4ylvvDsHW4jpJfdiWmM1pPXk1GGbVtP4IPS8BrryaIYbNaZsKmrD4+NotEZf26Rclun6OpQWdezREjTakN6+KHYzmDcm09swiUBu9ggTV922jsYzYMlJqQ7EXY1jiUE3gkv/V7GRpXqZKcymTYf08phu8V6SgjE6OMvDBNRYbRTvGWjBUWasz3UWnNkivP31iqJj7zD5sesEZ+RSUpFIMbG8b3PdOZUS6RzQMrPuA3s4reCveB7RIc/V1CvVapwXRGdT8pVqfOOCk3soOBFXU2D3SBeT1MvY3YoEbixTYIYci/ywHVMnxaQk9LfbD2NcURo+EQ77R6xqEMbHEqGc2lv5hKP4Zy5p3GRaDMMAJE93b/v/XoFZG+dwsX3jtlE/+pN5Lx468dXRGsMq3PJFZVLjy8HN1+HCMUvPGb+5fohtSgqiY+QRzkNf0t5F7j5Q8ufXXvGPoqfnnyqCKeEGH+llwpfbMZuX9EY7Prmz92DCKi6kEa37eWbX4xmnmx89PYi503NmYZ4jgcXlJ/+ecunqEOmny+qhhuItk9d/bX91uAa2gfi2c5e/Dt79ctWRT5JbCfaRzyNLqj9m0R9Vr71/9EV78W9P/20Uk3K3+cPkl3hHd5wYnbq/P7038FucLOmHCZ6hwpCT/1hRAxBto/LxMgcoX1qAM56aJYhHHuq5ynqTfeUfYxeKYEFqEf4O/DxpAcd4qtKhMgqkux7fHEC0oAIRW1Wnu5txxuufyj/6fqTnz28fwq48TV2Fwlq9/W8FVIveC/5AaTC40KRRxHaKUDFjt85cPy0bQnEEwWtN1pXX4SmddSu3Xz+ZcShGnRDX0nxjV334sd6RDxzI0WNHppepdFXvf+Z7p7wd94GRet9juiRKSsBNhGoW7pWGeNH00DF5Mo83EPvz9vIyElyNGV9XhD9KGcOu3S6EyH6vTm8qCvIDQ791H076t2SNmvr7HHuhG9Vc3WHPzf51LTBvTAObNxNiNzakg5oHX3xbjSBK+Iv/twQmZ++8gefQ9HNzGlRIP55FW13QukY+sIYrLrDkZEn3Ne+4Ubsg8saRnWvlpKuZsNQDaZezPMJDNzfVVa+ZpuemeAzc26K7NT8W6zSGsnzmF2Wryc2q/HU7V4Ikt5FaVnmBS45a+mmKWhdtTvQMV16+q7BH45H2Qx0onGYBvWvfzESvbI9IQ8ChDk6AOtXsHTW3HVtrbVqSUwuQbZkqqW3WZLjz8j6Y/ANKDvq2ODszvv1kGmPaPE+3LoYFEOwooT/D2D8qdl+9LeDkQK/pThdEh6mrpgf7iD1WD4j31VWsaoxJ2R6gn0uEon6Pd0Oi7CgIMzGJIaPsswqRaluFkEVXjK3LUfwjXlnHdN8mnuubkZztuFqKXNtfihQlb29IF7LadhaEZFYWWgtwCa2oGKZfk05QG4SWUihheQ5GRwm/KVa1Gq+C811VbleQf53GrzZaJqjXQLdYxJw1hdNzz7yfow5EL7l2Y6Zz72PjrmzMhg+3DIbCXTmmaoQGk4oxYbTZceiyv35f5Bm/G409H6hFtwz9Yb+0Pef4Ahc1ZI9HI7RAbESmI0gf70Up6EEYhKdbFB3dtAOGtKAkP0zzcIgGBPxsqM4HVbxShzKhXO8EINMZDhbrK7Q+it9y6Gp12nS6SsDJVTPQa4RYLU4O5CyVr96lwqMO3glfHtaVpdi9KrzLweZQ7ZXEj5a7qf3afX7N0V+a0Fa3LfzQlvDZddKEX6gYiM36En1b3Zawg9vC2pHqgZoOB7Cdb+rPVoXl1SoWMeA2iv4DE6RACxm1irCC01VXDGvVZBWlIwVnvVcPVUPnCcULDiavntZY4qqrDLWzl1PKFhR1uIRjF9LKtzbTZkaFVFxpbb1LSuXSISbuf7QLtDHafWAPIQq4AvYhu1sD2YQ2foOwgXAO/5P505Grv79kzAsiEalYQWwJRVgyHmi3bCzCsdn03It1BHQPuZvUTe7xZVD3SvaKeyQ9a7oxw5TzEBguh2PP0wyYg4bxZBbZcXCLBtMD9ZDnnfWUYiF/3V437v+duKpWlFkRFYKJSRNb/S5FN+6YCIEwcYGj4IhTLCbZ6ea2APwchjEp0O5coVxqSC++VjVyUZbWkJQXVNpdEYtOUg38VbSz+Q8NjpwTm+FKBj8bi85c5c9TOLolJLU55hb8/5d/VLiiCBAvNZHuDH3kkaz4Z0SLW5rX/GRg8XNwQAcp/vqysTPd+PRd4Q4dVrvne+m/vQlRaAMmFzZCDtyj8LifNI7DX9tfUwUbmxHOGt+KSILA98l6F3BA/ACz08GLyfACc1NWLATjDYe+MvhtraS00Lth3iaw4r+SZe6wH+mYZxq8YxqoSNg950iTEE49FpTptvLah2Tj2+d1LTpc3AbhNuWGzkp7bmzZf1+UtHNUFL/pT4dp9j28mtubaECX1ffQp+6y6LftT0TbPXSe23X14zEeA8gj4MlPvxGqqbPTRL0ghS3YkHGsqa/Pclu2EDTRzmOXLMFtn0mjjtDSgGksh4N+z3laFWAd76Za4y5gH/Bxw9S0pCSLTVCtHjJhs7Kx1qwsfxM0E4iE2NYF6iuLEaoQxR7JwZ6npi2yPwy02u0mbP3MFs3S3h4lcIBDy+MoihFsHO50BHDAd5sgNrnS5eiugeJvx3eCaMm9cUc44h6Z/OstBzoMIsf15UC0ZC25C+m+vjCBUcNIouoK7uh54xbnZFaukrmBMCf1cKrxQrTL3BTW/SC8J1tnSI0zFKlFyJzckIoHQFMCHxSD5UwPj9kH/3NvGJOUX/FdoCTrqAZUeW24bqu+PM1J63M3i1nKWUrv/C700V1e6npTlv+Ff2wiMIo/H1vjy+SPmwPXhnUiopf1P78K99++lf+x0K3Vv+gnvy/fp36+52/NcIRsZM0Zx2lHJ6xHDPtIlQG1x3YCZPNj5zkpnrAyKbwKiMtFE+W9qU2v93p+2VOT6LkCu9KMc7+9Y26WjsM+EtxF4BDBWYwP5S0Zowaws/biHRvAGMthTs4x2w4QEtWMa0xK6k3oXW4x4w3D1gV5YHCgvGx9nO4f00W4NzgTE+YNY5pwD/CbxUeEKikOf5/xGo+TTggXhDkdenUIdejfrU5hOMFX27MtUh0BQ2KyH0lXWr8xKsNslCXLfLR+0abY6fFaX1HF7EiNBDbIhqBdEkPyPK2rTlJVwLC72d2xUuxEluOJuvM5vgh0Jxcvi042RYu0wuTG5clNDWe3TawbQoU5kJO5AT5tbTHRwrUS6audVw2KOwH8IT1LRurnJHL6STJWM9NN2SM3ZrxXn3PfDQ79vNsFtxG34SA7eh2yCbmXvBZV52Ut8B89mVFoHCm8+v3M9yOFy0bdCdtDmaHbCRS7yH72MB/bOUmZ7KR2TlAmOv35WAFJyNWka5dnRWQBWxBCg5h2cC1Kh1TEBdSURaZ6Edf4+2LiB2npyEAUPaKLQXAN76KjghDptPjBGKx/+PZKmyXEHBxc8Ol07bNomWfcwtoUZxMvZ05VSPm06EJdEaUlDrK27s7yzvXVDzt9tJxIPPi5TNPqn5fn32r3b2k4zN6yLMhb7PJWIJe6Qq+UfEqURHVLlImfla7dUa6f0ZRHJCrxU5SEec1H7VXudfG+5rkm6FZlkiIkB1UeUN5ISTPSbWUKQcGGcSWAEfEjqEUacL9X90kfo+w6ar9fseiowb79vfvCAq+YsGFwz5gcHBm5Yud9WhWD661rTzUwDWcPcytfCdVrotJ/kX5J6KMTrw1vb1/EpNTZVaEx61JyhlUariketWPFjjiUScNVDecAHVeKK6msrO3gQGx7fIx+0c4GnI7UZFo4aWqdSwrnQV8l6Z3TO5IynER2ItvocOUSASNUqHMIVC61JYUs+Gvoy2E+//G5GUvm73rclhIerKpUaJtu44j2NJjteC7cgcvWLD8UvOAMnW8U3+epCAmWx5YmJ2vzxWVJDkpw6n6SWholkaikmm0ZlkRFSdSyLRqZ6dYoTZVPI2XUc4dPOnb9FVWaGZAu908PyLoONBy4y1eHnSaX76OVVRbpzuKP/ApC++HihI6GA5EFctZq0wzqt+XYzkSFd2JAdkmGa6K1Ziv/7lkLG1z1kkRw4MpKttBP6H/45OtnCQjLfzJw0MqwHj+6r+m2vVsCeY8BwszhNnD5e7fY6K+dFIoZxQMHm2jg++qDgzb6G3rxFhmr/yy98eCx5uCOEI1tKbbktoODvuyDxxq/Z40BQlL6NU+e9IZHmBSKRmajgtuBel/TKMaCUOALh2MI1R2Dxe5nNe1xSTKtRKWSaGVJrfv2T+5U289Z3BYeIldSkXhokchOgeMMGfNUUjdFB4qgFTnYQ2yEwaFm0ToKZWerokCxfzKjtfXgnmQEK/LzFeB2OeooL2jg48CnIN7Z98WPTwUEBSzFdBxAY4saAksOvD3wriQQn1JyfCqa4rJ+C0mKKGKLh75pfRG7YYXoxFS0bsYFOOAEbxxzAhrGFO2b468H0OP4n45TeFLfOr7BP5YgbXgbchxpxVtNoj2J6cOEYnqhExwdRhP4t/jQBZ3iYRbMSCsylOFsAMwD/rxsDDETQ7gFABqzNjFrhpZgTVqRmJPgz3PCBFnE004YGPGmty8+lQp02avDnI7GIk7PWHFMUbVZULBnz+oZ1f4stM/gQ07q7nfg4B5QAP7X90F06EBfEQ72YV6RNeQhuOkrPcZW2jDmGG8YZQzLz4chKb0Uqvl5Z2WqhtLXB1+T5df70AH2999QSwtcDu/pBgoiXIn5FPDWnfT1UvGV4m+qU1cF7g93rLuwasdRwVM3y6Waj+JP1dZLT6TCozvmXdi5XvbQ/8oEOIybQRKRXmlekeTEBr75h+g4mmMPjcldBHFh1/yvwXrPF+UqPOwc9HHRD3OdOoV1inWP5E+SEaQ0V5mdzJ3ydVfQLnOlSQkyuyN4j3WKaRwjs7zXPeTmcN52e2GgMfDxYGRpRETp7Iiy0vDZZeHhZbPDS8teV4QYwGs/GBxeVg4/oMJVLFXmfKf2vy6kjdqADeD6rwWGLJ3X7jQ/lq2Cq4QP+ipfGhw+1AHij3+66nm5T/kTvKcGfv2l2AxnDbLhPX811fBYTX3numavOttnR4su/B1PuS7T320J/PRvR+1jVIdpcRA+MOu2HWVC0OLUDvTjmo5/P4aVfAN82uySPFG2cOksSbLMmFtlPZkdDlCFyKKxpn3hpdNtb+m0T0iNDX/ADe9AAZajCdRqm9U84KQGmgJMgakPuasQmHOL+w/uX9TB7h6tVDGEDpjDG/k8zwJ1BveAxqogN8NNrVBqPNFSJcUFrVUGXNUwefBMSxSvvag9Or5ovILwU7sVgYNqrELY7+TW55u9mknLId0uUFGS2Ro/9X4pK8yCtcNMx24dUnG80mbFwF0dUJrkEU6dwI3VfdtSYtjcUWJ9wY91xPzbnFFlZaWRLdFxWAuVB0e0T/k26/RY1aF33swBl5X1ZlmqBKZ59AZ0w+wBd4k2qiTXntAG1nFVh5W2fagzSWqv6mDWJN+ySvAlY3RhUPKX1cL7t6RbTNt/UD0ckvebL+DfS/On8XlHwUlGMjBbWgI/mXfV1oK/HI3qOvNcOOb0baeQwf5HgnfY8+y9bgWXOPPcy4T8VVyX3E7BS4idwVLEWhnAX9uDPyINwrmf3CIC2z0lvjtfpsFLHAofiQVbSU0PAWSmg4989CcNxf4HEEFHhGX7AckZwtEilFU0BLOLIpQTgq3coIdoXtAhlH/0JwFm11g+FqnCt4iQsDTFyZAT9jmW9I39xqAtRCv3H+NAvGKst+/j0hcyxiAyhn3YpOSNj9KZT2nnsG3F9FFqdOmpSql/ffax2mU8OelGbyIE0mlwySicXkgcwfwnp/u/3jcUqBaImDf982gQCL/xhvXkBeOmL5Ox3pGR8GAv2Eg898yBRn6xY3wqAG3leWH09l4NuU3jSeXD67161j7J45pP9Ee7imZS7N5V3b4Mwc1bsGjJCitZ2SpW/X+HpGFNa0WJ2t85gDOdY8xYsePEzSnnXOLFT5AwUeJckyRNllvueeSZV9755Ou6l5YE7HLixYpi9eRzpXKi+UGaxw0in/docQIOHpYn4nAkkNmOEuQFuCaJ8z6r/W7OI924CrgSvU3LBtFBxeYtIAdgr20zR9Tv0nPoqkOKwkEMech3WsDOjtFSbK8Ju2LRI9EGrw7IR9ITroPXQ6UUNDL+uULOmaLDWYSbE7mYzS2AISPpxBParBHpSLxd3POacnuLg9fgrCbGRenLr2l5lk+HMcsEFEYW0TYWMeVHuv8kQeKRxKuVRG9NyL99M3KKdwkeO6uEVjvFiFwybYnKNDywRC4kUwzHE2yMJAszHM9mM5Syx9rmDFMXDLNZ7JcD0ObCNGGRYOLodS3yCmIsWXN6XDK70EIBWbQdOxoBAAA=') format('woff2'),
       url('iconfont.woff?t=1742747120521') format('woff'),
       url('iconfont.ttf?t=1742747120521') format('truetype'),
       url('iconfont.svg?t=1742747120521#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont iconfont-yudiancan0101"></span>
            <div class="name">
              预点餐
            </div>
            <div class="code-name">.iconfont-yudiancan0101
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-canzhuoyi"></span>
            <div class="name">
              餐桌椅
            </div>
            <div class="code-name">.iconfont-canzhuoyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-wok-2"></span>
            <div class="name">
              炒锅
            </div>
            <div class="code-name">.iconfont-wok-2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-icon"></span>
            <div class="name">
              口腔科
            </div>
            <div class="code-name">.iconfont-icon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-yangfa"></span>
            <div class="name">
              养发
            </div>
            <div class="code-name">.iconfont-yangfa
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-yingxiao"></span>
            <div class="name">
              营销
            </div>
            <div class="code-name">.iconfont-yingxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-qita"></span>
            <div class="name">
              其它
            </div>
            <div class="code-name">.iconfont-qita
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-backtotop"></span>
            <div class="name">
              返回头部
            </div>
            <div class="code-name">.iconfont-backtotop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-jianfei"></span>
            <div class="name">
              减肥
            </div>
            <div class="code-name">.iconfont-jianfei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-chanhoujianfei"></span>
            <div class="name">
              产后减肥
            </div>
            <div class="code-name">.iconfont-chanhoujianfei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-sousuo1"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.iconfont-sousuo1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-zaowanan3"></span>
            <div class="name">
              早晚安
            </div>
            <div class="code-name">.iconfont-zaowanan3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-chanhou"></span>
            <div class="name">
              产后
            </div>
            <div class="code-name">.iconfont-chanhou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-chuzhou"></span>
            <div class="name">
              除皱
            </div>
            <div class="code-name">.iconfont-chuzhou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-meirongmeifa"></span>
            <div class="name">
              美容美发
            </div>
            <div class="code-name">.iconfont-meirongmeifa
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-qubaquzhi"></span>
            <div class="name">
              祛疤祛痣
            </div>
            <div class="code-name">.iconfont-qubaquzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-meijiemb"></span>
            <div class="name">
              美睫mb
            </div>
            <div class="code-name">.iconfont-meijiemb
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-pifuke"></span>
            <div class="name">
              皮肤科
            </div>
            <div class="code-name">.iconfont-pifuke
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-wenxiuwenmei"></span>
            <div class="name">
              纹绣纹眉
            </div>
            <div class="code-name">.iconfont-wenxiuwenmei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-shuiguangzhen"></span>
            <div class="name">
              水光针
            </div>
            <div class="code-name">.iconfont-shuiguangzhen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-yangsheng"></span>
            <div class="name">
              养生
            </div>
            <div class="code-name">.iconfont-yangsheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-yimeikangshuai"></span>
            <div class="name">
              医美抗衰
            </div>
            <div class="code-name">.iconfont-yimeikangshuai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-shouye1"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.iconfont-shouye1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-weixin3"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.iconfont-weixin3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-shouji"></span>
            <div class="name">
              手机
            </div>
            <div class="code-name">.iconfont-shouji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-huangguan"></span>
            <div class="name">
              皇冠
            </div>
            <div class="code-name">.iconfont-huangguan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-jine"></span>
            <div class="name">
              金额
            </div>
            <div class="code-name">.iconfont-jine
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-dengji"></span>
            <div class="name">
              等级
            </div>
            <div class="code-name">.iconfont-dengji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-zongjine"></span>
            <div class="name">
              总金额
            </div>
            <div class="code-name">.iconfont-zongjine
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-dianhua"></span>
            <div class="name">
              电话
            </div>
            <div class="code-name">.iconfont-dianhua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.iconfont-sousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-xiaoxi"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.iconfont-xiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-xiangshangjiantou"></span>
            <div class="name">
              向上箭头
            </div>
            <div class="code-name">.iconfont-xiangshangjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-xiangxiajiantou"></span>
            <div class="name">
              向下箭头
            </div>
            <div class="code-name">.iconfont-xiangxiajiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-xiangyoujiantou"></span>
            <div class="name">
              向右箭头
            </div>
            <div class="code-name">.iconfont-xiangyoujiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-xiangzuojiantou"></span>
            <div class="name">
              向左箭头
            </div>
            <div class="code-name">.iconfont-xiangzuojiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-querenduigouzhengquetijiaowanchengxianxing"></span>
            <div class="name">
              确认 对勾 正确 提交 完成 线性
            </div>
            <div class="code-name">.iconfont-querenduigouzhengquetijiaowanchengxianxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-ren1"></span>
            <div class="name">
              人
            </div>
            <div class="code-name">.iconfont-ren1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-tuichu3"></span>
            <div class="name">
              退出
            </div>
            <div class="code-name">.iconfont-tuichu3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-shoucang1"></span>
            <div class="name">
              收 藏
            </div>
            <div class="code-name">.iconfont-shoucang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-xiugai2"></span>
            <div class="name">
              修改
            </div>
            <div class="code-name">.iconfont-xiugai2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-shoucang11"></span>
            <div class="name">
              收 藏
            </div>
            <div class="code-name">.iconfont-shoucang11
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-zhuye"></span>
            <div class="name">
              主页
            </div>
            <div class="code-name">.iconfont-zhuye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-combinedshape"></span>
            <div class="name">
              人
            </div>
            <div class="code-name">.iconfont-combinedshape
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-xiaolaba"></span>
            <div class="name">
              小喇叭
            </div>
            <div class="code-name">.iconfont-xiaolaba
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-xiaoxi1"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.iconfont-xiaoxi1
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont iconfont-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-yudiancan0101"></use>
                </svg>
                <div class="name">预点餐</div>
                <div class="code-name">#iconfont-yudiancan0101</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-canzhuoyi"></use>
                </svg>
                <div class="name">餐桌椅</div>
                <div class="code-name">#iconfont-canzhuoyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-wok-2"></use>
                </svg>
                <div class="name">炒锅</div>
                <div class="code-name">#iconfont-wok-2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-icon"></use>
                </svg>
                <div class="name">口腔科</div>
                <div class="code-name">#iconfont-icon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-yangfa"></use>
                </svg>
                <div class="name">养发</div>
                <div class="code-name">#iconfont-yangfa</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-yingxiao"></use>
                </svg>
                <div class="name">营销</div>
                <div class="code-name">#iconfont-yingxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-qita"></use>
                </svg>
                <div class="name">其它</div>
                <div class="code-name">#iconfont-qita</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-backtotop"></use>
                </svg>
                <div class="name">返回头部</div>
                <div class="code-name">#iconfont-backtotop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-jianfei"></use>
                </svg>
                <div class="name">减肥</div>
                <div class="code-name">#iconfont-jianfei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-chanhoujianfei"></use>
                </svg>
                <div class="name">产后减肥</div>
                <div class="code-name">#iconfont-chanhoujianfei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-sousuo1"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#iconfont-sousuo1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-zaowanan3"></use>
                </svg>
                <div class="name">早晚安</div>
                <div class="code-name">#iconfont-zaowanan3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-chanhou"></use>
                </svg>
                <div class="name">产后</div>
                <div class="code-name">#iconfont-chanhou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-chuzhou"></use>
                </svg>
                <div class="name">除皱</div>
                <div class="code-name">#iconfont-chuzhou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-meirongmeifa"></use>
                </svg>
                <div class="name">美容美发</div>
                <div class="code-name">#iconfont-meirongmeifa</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-qubaquzhi"></use>
                </svg>
                <div class="name">祛疤祛痣</div>
                <div class="code-name">#iconfont-qubaquzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-meijiemb"></use>
                </svg>
                <div class="name">美睫mb</div>
                <div class="code-name">#iconfont-meijiemb</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-pifuke"></use>
                </svg>
                <div class="name">皮肤科</div>
                <div class="code-name">#iconfont-pifuke</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-wenxiuwenmei"></use>
                </svg>
                <div class="name">纹绣纹眉</div>
                <div class="code-name">#iconfont-wenxiuwenmei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-shuiguangzhen"></use>
                </svg>
                <div class="name">水光针</div>
                <div class="code-name">#iconfont-shuiguangzhen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-yangsheng"></use>
                </svg>
                <div class="name">养生</div>
                <div class="code-name">#iconfont-yangsheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-yimeikangshuai"></use>
                </svg>
                <div class="name">医美抗衰</div>
                <div class="code-name">#iconfont-yimeikangshuai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-shouye1"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#iconfont-shouye1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-weixin3"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#iconfont-weixin3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-shouji"></use>
                </svg>
                <div class="name">手机</div>
                <div class="code-name">#iconfont-shouji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-huangguan"></use>
                </svg>
                <div class="name">皇冠</div>
                <div class="code-name">#iconfont-huangguan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-jine"></use>
                </svg>
                <div class="name">金额</div>
                <div class="code-name">#iconfont-jine</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-dengji"></use>
                </svg>
                <div class="name">等级</div>
                <div class="code-name">#iconfont-dengji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-zongjine"></use>
                </svg>
                <div class="name">总金额</div>
                <div class="code-name">#iconfont-zongjine</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-dianhua"></use>
                </svg>
                <div class="name">电话</div>
                <div class="code-name">#iconfont-dianhua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#iconfont-sousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-xiaoxi"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#iconfont-xiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-xiangshangjiantou"></use>
                </svg>
                <div class="name">向上箭头</div>
                <div class="code-name">#iconfont-xiangshangjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-xiangxiajiantou"></use>
                </svg>
                <div class="name">向下箭头</div>
                <div class="code-name">#iconfont-xiangxiajiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-xiangyoujiantou"></use>
                </svg>
                <div class="name">向右箭头</div>
                <div class="code-name">#iconfont-xiangyoujiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-xiangzuojiantou"></use>
                </svg>
                <div class="name">向左箭头</div>
                <div class="code-name">#iconfont-xiangzuojiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-querenduigouzhengquetijiaowanchengxianxing"></use>
                </svg>
                <div class="name">确认 对勾 正确 提交 完成 线性</div>
                <div class="code-name">#iconfont-querenduigouzhengquetijiaowanchengxianxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-ren1"></use>
                </svg>
                <div class="name">人</div>
                <div class="code-name">#iconfont-ren1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-tuichu3"></use>
                </svg>
                <div class="name">退出</div>
                <div class="code-name">#iconfont-tuichu3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-shoucang1"></use>
                </svg>
                <div class="name">收 藏</div>
                <div class="code-name">#iconfont-shoucang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-xiugai2"></use>
                </svg>
                <div class="name">修改</div>
                <div class="code-name">#iconfont-xiugai2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-shoucang11"></use>
                </svg>
                <div class="name">收 藏</div>
                <div class="code-name">#iconfont-shoucang11</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-zhuye"></use>
                </svg>
                <div class="name">主页</div>
                <div class="code-name">#iconfont-zhuye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-combinedshape"></use>
                </svg>
                <div class="name">人</div>
                <div class="code-name">#iconfont-combinedshape</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-xiaolaba"></use>
                </svg>
                <div class="name">小喇叭</div>
                <div class="code-name">#iconfont-xiaolaba</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-xiaoxi1"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#iconfont-xiaoxi1</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
